<template>
  <div class='count-view'>
      <el-card class='left-view'>
        <el-menu
          :default-active="this.activePath"
          class="el-menu-vertical-demo"
          text-color='#666'
          active-text-color="#EB9F9F"
         >
          <el-menu-item class='nav-item'  v-for="(item,index) in navOption" :key='index' :index='item.comp' @click.capture='changePath(item.comp)'>
            <i :class='item.icon'></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </el-menu>
      </el-card>
      <el-card class='right-view'>
        <transition name="el-fade-in-linear">
          <component v-bind:is="activePath" :chartData='chartData' :projectKey='projectKey'/>
        </transition>
      </el-card>
  </div>
</template>
<script>
import GeneralSituation from '@/views/project/form/statistics/GeneralSituation'
import RecycleData from '@/views/project/form/statistics/RecycleData'
import DataCharts from '@/views/project/form/statistics/DataCharts'
import { sortObj } from '@/utils'

export default {
  components: { GeneralSituation,RecycleData,DataCharts },
  props: [
   'projectKey'
  ],
  data() {
    return {
      activePath: 'GeneralSituation',
        navOption: [
          {
            title: '回收总览',
            icon: 'el-icon-odometer',
            comp: 'GeneralSituation'
          },
          {
            title: '统计数据',
            icon: 'el-icon-s-order',
            comp: 'RecycleData'
          },
          {
            title: '统计图表',
            icon: 'el-icon-s-data',
            comp: 'DataCharts'
          }
        ],
      chartData: {}

    }
  },
  created() {
    this.getDataInfo()
  },
  mounted() {
  },
  methods: {
    changePath(path) {
      this.activePath = path
      console.log('this.activePath', this.activePath)
    },
    async getDataInfo() {
      const { data: res } = await this.$http.get('/project/result/statistics/' + this.projectKey)
      if (res.code === 200) {
        this.$message.success('获取统计数据成功')
        this.chartData = sortObj(res.data)

        console.log('this.chartData----hzy', this.chartData)
      } else {
        this.$message.warning('暂无信息,请填写后查看')
      }

    }

  }

}
</script>
<style lang="less" scoped>
@import "src/assets/css/themeColor";
  *{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .el-card {
    height: 100%;
    min-height: 300px;
    border-radius: 10px;
    text-align: center;

  }
  .count-view{
    box-sizing: border-box;
    height: 100%;
    padding: 15px;
  }
  .left-view{
    float: left;
    width: 10%;
    margin-right: 15px;
    overflow-y: auto;
  }
  .right-view{
    float: right;
    width: calc(90% - 15px);
    overflow-y: auto;

  }
  /deep/.nav-item{
    width: 100%;
    height: 150px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: @theme_pink;
    i{
      font-size: 26px;
      display: block;
    }
    span{
      display: block;
    }
  }

</style>
